<template>
<div id="father">
  <div id="tit">
    <i style="color: #009688" class="el-icon-user-solid"></i> <b> &nbsp;个人信息</b>
  </div>

    <div id="infom">
      <div class="infom_son">
    <div class="text0">
      <b>用户名:</b>
    </div>
      <div class="text01" id="uuname">
        NaN
      </div>
    </div>
      <div class="infom_son">
        <div class="text0">
          <b>性别:</b>
        </div>
        <div class="text01" id="ugender">
          NaN
        </div>
      </div>
      <div class="infom_son">
        <div class="text0">
          <b>年龄:</b>
        </div>
        <div class="text01" id="uage">
          NaN
        </div>
      </div>
      <div class="infom_son">
        <div class="text0">
          <b>手机号:</b>
        </div>
        <div class="text01" id="uphone">
          NaN
        </div>
      </div>
      <div class="infom_son">
        <div class="text0">
          <b>车位总量:</b>
        </div>
        <div class="text01" id="chewei">
          NaN
        </div>
      </div>
      <div class="infom_son">
        <div class="text0">
          <b>钱包金额:</b>
        </div>
        <div class="text01" id="money">
          NaN
        </div>
      </div>

      <input type="button" value="实名认证" class="butt1" @click="isTrue()"/>
      <input type="button" value="信息修改" class="butt1" @click="upd()">
      <input type="button" value="密码修改" class="butt1" @click="pswupd()">
      <input type="button" value="钱包充值" class="butt1" @click="addmoney()">
    </div>
  <div class="modal" id="modal-three" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-header" style="text-align: center">
        <h2 style="color: brown">实名认证</h2>
        <!--        <a href="#" class="btn-close" aria-hidden="true">×</a> -->
      </div>
      <div class="modal-body">
        <div style="padding-left: 25%;padding-right: 25%">
         真实姓名:<input type="text" id="uname"/><br/>
         身份证号:<input type="text" id="idCard"/><br/>
          <input type="button" value="提交" @click="authentication()" style="margin-top: 5%;font-size: 110%;width: 100%;height: 20%;  background-color: #009688;border-bottom-left-radius: 25px; border-top-right-radius: 25px;border: 1px solid #009688;"/>
        </div>

      </div>
      <div class="modal-footer">
        <a href="/#1-1" class="btn">返回</a>
      </div>
    </div>
  </div>
  <input type="hidden" value="0" id="box1"/>
  <div id="nothing">

  </div>
</div>
</template>

<script>
export default {
  name: "Proprietor_Information",
  data() {
    return{
      nowPwd :null,
      uuname :null,
      uage :null,
      uphone :null,
    }
  },
  created() {
     let _this=this;
     window.pswUpd=_this.pswUpd;
     window.infUpd=_this.infUpd;
     window.kejin=_this.kejin;
  },
  mounted() {
    this.show();

  },
  methods: {
    infUpd(){
      var newage =$("#newage").val();
      var newphone =$("#newphone").val();
      var i =localStorage.getItem("token");
      // var str = "";
      // if(newname!=""){
      //   str+="/uaccount="+newname;
      // }
      // if(newage!=""){
      //   str+="/uage="+newage;
      // }
      // if(newphone!=""){
      //   str+="/uphone="+newphone;
      // }
      this.sa.ajax("/e-user/user/updateUser/"+i,{
            uage:newage,
            uphone:newphone
          },
    function (resp){
      if(resp.data){
        $("#nothing").html("");
        $("#box1").val(0);
        this.show();
        this.sa.ok("信息修改成功！");
      }else {
        this.sa.error("密码修改失败！");
      }
    }.bind(this),
          {type: 'Put'}
    )
    },
    pswSub(){
      var oldPassword = $("#oldpsw").val();
      var newPassword =$("#newpsw2").val();
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/updateUpass/"+i,{
            oldPassword : oldPassword,
            newPassword : newPassword
          },
      function (resp) {
        if(resp.data){
          this.nowPwd = $("#newpsw2").val();
          $("#nothing").html("");
          $("#box1").val(0)
          this.sa.ok("密码修改成功！");
        }else{
          this.sa.error("密码修改失败！");
        }
      }.bind(this),
          {type: 'Put'}
      )

    },
    pswUpd(){
     if( $("#oldpsw").val()!="" && $("#newpsw1").val()!="" && $("#newpsw2").val()!=""){
       if($("#newpsw1").val()==$("#newpsw2").val()) {
         if($("#oldpsw").val()==this.nowPwd){
           $("#tips").html("");
           this.pswSub();
         }else{
           $("#tips").html("当前登录密码输入错误");
         }

       }else{
         $("#tips").html("两次输入的密码需要一致")
       }
     }else{
       $("#tips").html("输入框不能为空！")
     }
    },
    show() {
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/findByName/" + i, {},
          function (resp) {
            var yh = resp.data.yonghu;
            $("#uuname").html(yh.uname);
            this.uuname=yh.uname;
            $("#ugender").html(yh.ugender);
            $("#uage").html(yh.uage);
            this.uage =yh.uage,
            $("#uphone").html(yh.uphone);
            this.uphone =yh.uphone,
            $("#chewei").html(resp.data.chewei);
            this.nowPwd = yh.upwd;
            this.money();
          }.bind(this),
          {type: 'get'}
      )
    },
    money() {
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-user/person-wallet/queryWalletAmount/" + i + "/" + 2, {},
          function (resp) {
            $("#money").html(resp.data);
          }.bind(this),
          {type: 'get'}
      )
    },
    authentication() {
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/updateVerified/" + i, {
            "uname": $("#uname").val(),
            "idCard": $("#idCard").val()
          },
          function (resp) {
            if (resp.data != 1) {
              this.sa.error("实名认证失败，请检查输入的内容")
            } else {
              window.location.href = "#2-6"
              this.sa.ok("已完成实名认证！");
              this.show();
            }
          }.bind(this),
          {type: 'put'}
      )
    },
    isTrue() {
      var i = localStorage.getItem("token");
      this.sa.ajax("/e-user/user/realNameDetection/" + i, {},
          function (resp) {
            if (resp.data == 0) {
              window.location.href = "#modal-three";
            } else {
              this.sa.ok("你已经实名认证了");
            }
          }.bind(this),
          {type: 'get'}
      )
    },
    upd(){
      if($("#box1").val()==0) {
        $("#box1").val(1)
        var html = "<div id='ud1' style='      padding-left: 28%;\n" +
            "padding-right: 32%;"+
            "padding-top: 2%;"+
            "        width: 22%;\n" +
            "         float:left;"+
            "        margin-top: 1%;\n" +
            "        margin-left: 10%;\n" +
            "        background-color: gray;\n" +
            "        height: 100%;\n" +
            "        text-indent: 20px;\n" +
            "        background-color: #EEEEEE;\n" +
            "        border-bottom-right-radius: 25px;\n" +
            "        border-top-left-radius: 25px;\n" +
            "        border: 1px solid black;'>" +
            "<br/>"+
            "年龄：<input type='text' id='newage' style='float: right' value='"+this.uage+"'/><br/>" +
            "手机号：<input type='text' id='newphone' style='float: right' value='"+this.uphone+"'//><br/>" +
            "<input type='button' value='提交' onclick='infUpd()' style='margin-top: 2%;height:15%;width: 100%;border: 1px solid #009688'/><br/>"+
            "</div>";
        $("#nothing").html(html);
      }else{
        $("#nothing").html("");
        $("#box1").val(0)
      }
    },
    pswupd(){
      if($("#box1").val()==0) {
        $("#box1").val(1)
        var html = "<div id='ud2' style='      padding-left: 28%;\n" +
            "padding-right: 32%;"+
            "padding-top: 2%;"+
            "        width: 22%;\n" +
            "         float:left;"+
            "        margin-top: 1%;\n" +
            "        margin-left: 10%;\n" +
            "        background-color: gray;\n" +
            "        height: 100%;\n" +
            "        text-indent: 20px;\n" +
            "        background-color: #EEEEEE;\n" +
            "        border-bottom-right-radius: 25px;\n" +
            "        border-top-left-radius: 25px;\n" +
            "        border: 1px solid black;'>" +
            "当前的密码：<input type='text' style='float: right' id='oldpsw'/><br/>" +
            "----新密码：<input type='text' style='float: right' id='newpsw1'/><br/> "+
            "----确认密码：<input type='text' style='float: right' id='newpsw2'/><br/>"+
            "<div id='tips' style='color: #CA4242'></div>"+
            "<input type='button' value='提交' onclick='pswUpd()' style='margin-top: 2%;height:15%;width: 100%;border: 1px solid #009688'>"+
            "</div>";
        $("#nothing").html(html);
      }else{
        $("#nothing").html("");
        $("#box1").val(0)
      }
    },
    addmoney() {
      if($("#box1").val()==0) {
        $("#box1").val(1)
        var html = "<div id='ud2' style='      padding-left: 28%;\n" +
            "padding-right: 32%;"+
            "padding-top: 2%;"+
            "        width: 22%;\n" +
            "         float:left;"+
            "        margin-top: 1%;\n" +
            "        margin-left: 10%;\n" +
            "        background-color: gray;\n" +
            "        height: 100%;\n" +
            "        text-indent: 20px;\n" +
            "        background-color: #EEEEEE;\n" +
            "        border-bottom-right-radius: 25px;\n" +
            "        border-top-left-radius: 25px;\n" +
            "        border: 1px solid black;'>" +
            "输入充值金额：<input type='text' style='float: right' id='jine'/><br/>"+
            "<div id='tips' style='color: #CA4242'></div>"+
            "<input type='button' value='提交' onclick='kejin()' style='margin-top: 2%;height:15%;width: 100%;border: 1px solid #009688'>"+
            "</div>";
        $("#nothing").html(html);
      }else{
        $("#nothing").html("");
        $("#box1").val(0)
      }
    },
    kejin(){
      var i =  $("#jine").val();
      var to = localStorage.getItem("token");
      if(i!=""){
        $("#jine").val();
        this.sa.ajax("/e-user/person-wallet/walletRecharge/"+to+"/"+i,{},
            function(resp){
              if(resp.data==true){
                this.show()
                this.sa.ok("充值成功")
              }else{
                this.sa.error("失败")
              }
            }.bind(this),
            {type: 'PUT'})

      }else{
        this.sa.error("输入不能为空")
      }
    }
  }
}

</script>

<style scoped>
#father{
  background-color: white;
  width: 100%;
  height: 669px;
}
#tit{
  width:40%;
  margin-left: 30%;
  margin-top: 2%;
  height: 5%;
  text-align: center;
  font-size: 170%;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  border-left: #805322 5px solid;
  border-right: #805322 5px solid;
}
#infom{
  padding-left: 2%;
  width: 80%;
  margin-top: 1%;
  margin-left: 10%;
  background-color: gray;
  height: 42%;
  text-indent: 20px;
  background-color: #EEEEEE;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border: 1px solid black;
}
.infom_son{
  height: 12%;
  width: 30%;
  margin-left: 2%;
  margin-top: 3%;
  float: left;
}
.text0{
  float: left;
  padding-top: 5%;
  width: 35%;
  margin-top: 1.5%;
  margin-left: 3%;
  background-color: gray;
  height: 95%;
  text-indent: 20px;
  background-color: #009688;
  border-bottom-left-radius: 25px;
  border-top-right-radius: 25px;
  border: 1px solid #009688;
  font-size: 110%;
  text-align: center;
}
.text01{
  float: left;
  padding-top: 5%;
  width: 57%;
  margin-top: 2%;
  background-color: gray;
  height: 95%;
  text-indent: 20px;
  background-color: #EEEEEE;
  border-bottom: 1px solid #805322;
  border-right: 1px solid #805322;
  border-bottom-right-radius: 25px;
  font-size: 110%;
  text-align: left;
}
.butt1{
  margin-top: 5%;
  margin-left: 1%;
  width: 22%;
  height: 20%;
  border: 1px solid #009688;
  border-radius:20px ;
  color: black;
  font-size: 125%;
}
.butt1:hover{
  color: white;
  background-color: #009688;
}

.btn {
  background: #428bca;
  border: #357ebd solid 1px;
  border-radius: 3px;
  color: #fff;
  display: inline-block;
  font-size: 14px;
  padding: 8px 15px;
  text-decoration: none;
  text-align: center;
  min-width: 60px;
  position: relative;
  transition: color .1s ease;
}
.btn:hover {
  background: #357ebd;
}

.modal:before {
  content: "";
  display: none;
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
}
.modal:target:before {
  display: block;
}
.modal:target .modal-dialog {
  -webkit-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  transform: translate(0, 0);
  top: 10%;
}
.modal-dialog {
  background: #fefefe;
  border: #333 solid 1px;
  border-radius: 5px;
  margin-left: -120px;
  position: fixed;
  left: 40%;
  top: -100%;
  z-index: 11;
  width: 40%;
  -webkit-transform: translate(0, -500%);
  -ms-transform: translate(0, -500%);
  transform: translate(0, -500%);
  -webkit-transition: -webkit-transform 0.3s ease-out;
  -moz-transition: -moz-transform 0.3s ease-out;
  -o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
}
.modal-body {
  padding: 10px 20px;
  height: 100px;
  font-size: 120%;
}
.modal-header,
.modal-footer {
  padding: 10px 20px;
}
.modal-header {
  border-bottom: #eee solid 1px;
}
.modal-header h2 {
  font-size: 20px;
}
.modal-footer {
  border-top: #eee solid 1px;
  text-align: right;
}
#ud2,#ud1{
  padding-left: 2%;
  width: 80%;
  margin-top: 1%;
  margin-left: 10%;
  background-color: gray;
  height: 30%;
  text-indent: 20px;
  background-color: #EEEEEE;
  border-bottom-right-radius: 25px;
  border-top-left-radius: 25px;
  border: 1px solid black;

}
#nothing{
  height: 30%;
  width: 100%;
}
</style>